@use 'design-system' as *;

.heroSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: calc(var(--layout-max-width-small) + var(--layout-horizontal-margins) * 2);
    margin-right: auto;
    margin-left: auto;
    padding: 48px var(--layout-horizontal-margins) 96px;
}

.blueRectangle {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 97.5%;
    height: 62.5%;
    background: linear-gradient(0deg, #dde9f9 -61.34%, #ffffff 89.79%);
    z-index: -999;
    border-radius: 8px;
    border-left: 1px solid linear-gradient(0deg, #dde9f9 -61.34%, #0e449126 89.79%);
    border-right: 1px solid linear-gradient(0deg, #dde9f9 -61.34%, #0e449126 89.79%);
    border-bottom: 1px solid #0e449126;

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, #dde9f9 -61.34%, #ffffff 89.79%);
        z-index: -999;
        border-radius: 8px;
        border: none;
    }

    #{$selector-darkmode} & {
        background: linear-gradient(0deg, #29384b -61.34%, #141d2c 89.79%);
        border-left: 1px solid linear-gradient(0deg, #29384b -61.34%, #f1bbde26 89.79%);
        border-right: 1px solid linear-gradient(0deg, #29384b -61.34%, #f1bbde26 89.79%);
        border-bottom: 1px solid #f1bbde26;

        @media screen and (max-width: $breakpoint-landing-page-medium) {
            background: linear-gradient(0deg, #29384b -61.34%, #141d2c 89.79%);
            border: none;
        }
    }
}

.heroSectionInner {
    max-width: calc(var(--layout-max-width) + var(--layout-horizontal-margins) * 2);

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        max-width: 100%;
    }
}

.headingContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: $spacing-size-12;
    gap: $spacing-size-2;
}

.highlight a {
    padding: 2px;
    border-bottom: 2px solid var(--color-util-brand-500);
    color: var(--color-fg-secondary);
    padding: 0.2em;
    border-radius: 0.2em;
    transition: background-color 0.3s ease;
    font-weight: var(--text-bold);
}

.highlight:hover {
    cursor: pointer;
}

.heroSectionContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    gap: $spacing-size-8;
    max-width: 100%;
}

.heroSectionHeadingContainer {
    display: flex;
    flex-direction: column;
    margin-top: $spacing-size-12;

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        margin-top: $spacing-size-4;
    }
}

.heroSectionVersionTagContainer {
    display: flex;
    border-radius: var(--radius-4xl);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    align-self: center;
    background-color: var(--color-brand-200);
    font-weight: var(--text-base);

    #{$selector-darkmode} & {
        background-color: var(--color-bg-secondary);
    }

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        width: 100%;
    }
}

.heroSectionVersion {
    border: 2px solid var(--color-util-brand-200);
    background: var(--color-white);
    border-radius: var(--radius-4xl);
    margin: 2px;
    padding: 0px $spacing-size-2;
    font-size: var(--text-fs-sm);
    font-weight: var(--text-base);
    color: var(--color-brand-500);

    #{$selector-darkmode} & {
        color: var(--color-button-primary-bg);
        background: var(--color-bg-primary);
        border: 2px solid var(--color-bg-secondary);
    }

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        display: none;
    }
}

.heroSectionFeatureHighlight {
    display: flex;
    align-items: center;
    padding: 0px $spacing-size-2;
    font-size: var(--text-fs-sm);
    font-weight: var(--text-base);
    color: var(--color-brand-500);

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        font-size: var(--text-fs-sm);
        text-align: center;
        padding: $spacing-size-1 $spacing-size-2;
    }

    #{$selector-darkmode} & {
        color: white;
    }

    span {
        @media screen and (min-width: $breakpoint-landing-page-medium) {
            display: inline-block;
            max-width: 66ch;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.heroSectionFeatureArrow {
    flex-shrink: 0;
    height: 16px !important;
    width: 16px !important;
    margin-left: $spacing-size-2 !important;
    fill: var(--color-brand-500) !important;

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        margin-left: 0;
    }

    #{$selector-darkmode} & {
        fill: var(--color-button-primary-bg) !important;
    }
}

.heroSectionTag {
    color: var(--color-brand-400);
    font-size: 24px;
    text-align: center;
    line-height: 24px;
    font-weight: var(--text-bold);
    margin-top: $spacing-size-8;
    margin-bottom: 0;
}

.heroSectionHeading {
    font-size: 72px;
    text-align: center;
    line-height: 77px;
    margin-bottom: $spacing-size-8;
    padding: 0px $spacing-size-64;
    font-weight: var(--text-bold);

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        font-size: 52px;
        padding: 0;
        line-height: 55px;
    }
}

.heroSectionSubHeading {
    font-size: var(--text-fs-lg);
    font-weight: var(--text-base);
    color: var(--color-text-primary);
    margin: 0px $spacing-size-48;
    text-align: center;
    margin-bottom: 0px;

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        margin: 0;
        padding: 0;
    }
}

.heroSectionButtonContainer {
    display: flex;
    justify-content: center;
    min-height: 48px;
    gap: $spacing-size-4;

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        flex-direction: column;
    }
}

.heroSectionCta1 {
    color: var(--color-bg-primary);
    background: var(--color-button-primary-bg);
    align-content: center;
    padding-bottom: 6px;

    &:hover {
        color: var(--color-bg-primary) !important;
        background: var(--color-button-primary-bg-hover);
    }

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        text-align: center;
    }
}

.heroSectionCta2 {
    display: flex;
    min-width: 315px;
    align-items: center;
    gap: $spacing-size-2;
    padding: $spacing-size-2;
    border-radius: var(--radius-md);
    background-color: var(--color-brand-200);
    color: var(--color-gray-900);
    font-family: var(--text-monospace-font-family);
    justify-content: center;

    #{$selector-darkmode} & {
        background-color: var(--color-button-tertiary-bg-hover);
    }

    @media screen and (max-width: $breakpoint-landing-page-medium) {
        min-width: auto;
        width: 100%;
    }
}

.heroSectionDemoContainer {
    display: flex;
    flex-direction: column;
    height: 600px;
}

.heroSectionViewAllDemosLink {
    appearance: none;
    padding: 0;
    text-align: left;
    align-self: flex-end;
    font-weight: var(--text-regular);
    color: var(--color-link);
    transition: color 0.25s ease-in-out;
    border: none;
    background-color: transparent;
    box-shadow: none;

    &:hover {
        background: transparent;
        color: var(--color-link) !important;
    }
}

.heroSectionDemosArrow {
    height: 16px !important;
    width: 16px !important;
    margin-left: $spacing-size-2 !important;
    fill: var(--color-link) !important;
}

.examplesSectionContainer {
    --horizontal-gap: #{$spacing-size-4};

    display: flex;
    flex-direction: column;
    gap: $spacing-size-8 var(--horizontal-gap);

    @media screen and (min-width: $breakpoint-landing-page-small) {
        flex-direction: row;
    }

    @media screen and (min-width: $breakpoint-landing-page-small) and (max-width: $breakpoint-landing-page-medium) {
        flex-wrap: wrap;
    }
}

.examplesSectionCard {
    border-radius: var(--radius-md);
    background: var(--color-gray-50);

    #{$selector-darkmode} & {
        background: var(--color-gray-800);
    }

    @media screen and (min-width: $breakpoint-landing-page-small) {
        width: calc(50% - var(--horizontal-gap) / 2);
    }
}

.examplesSectionCardImage {
    width: 100%;
    height: 200px;
    object-fit: none;
    object-position: 0 0;
    border-right: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md) var(--radius-md) 0 0;

    #{$selector-darkmode} & {
        filter: brightness(0.9);
        mix-blend-mode: lighten;
    }
}

.examplesSectionCardDetails {
    display: flex;
    flex-grow: 1;
    font-size: 16px;
    flex-direction: column;
    padding: $spacing-size-4 $spacing-size-4 0px;
}

.examplesSectionCardCta {
    display: flex;
    justify-content: flex-end;
    gap: $spacing-size-4;
    padding: $spacing-size-4;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
